<template>
  <div>
    <!-- 原始内容区域 -->
    <div ref="exportContent">
      <h2>调查问卷</h2>

      <div class="question">
        <h3>问题1: 你喜欢哪种编程语言?</h3>
        <div class="option-container">
          <input
            type="radio"
            name="q1"
            id="q1_1"
            v-model="q1"
            value="1"
            checked
          />
          <label for="q1_1">JavaScript</label>
        </div>
        <div class="option-container">
          <input type="radio" name="q1" id="q1_2" v-model="q1" value="2" />
          <label for="q1_2">Python</label>
        </div>
        <div class="option-container">
          <input type="radio" name="q1" id="q1_3" v-model="q1" value="3" />
          <label for="q1_3">Java</label>
        </div>
      </div>

      <div class="question">
        <h3>问题2: 你使用Vue吗?</h3>
        <div class="option-container">
          <input
            type="radio"
            name="q2"
            id="q2_1"
            v-model="q2"
            value="1"
            checked
          />
          <label for="q2_1">是</label>
        </div>
        <div class="option-container">
          <input type="radio" name="q2" id="q2_2" v-model="q2" value="2" />
          <label for="q2_2">否</label>
        </div>
      </div>
    </div>

    <button @click="exportToWord">导出Word文档</button>
  </div>
</template>

<script>
import htmlDocx from "html-docx-js/dist/html-docx";
import { saveAs } from "file-saver";
// 实现替换指定DOM并导出Word（不影响原页面）
// 下面是一个完整的Vue 2组件实现，它会克隆指定DOM区域，替换其中的单选按钮为可视化符号，然后导出为Word文档，而不会影响原页面的显示。
export default {
  data() {
    return {
      q1: "1", // 默认选中第一个选项
      q2: "1", // 默认选中第一个选项
    };
  },
  methods: {
    exportToWord() {
      // 1. 获取原始DOM节点并克隆
      const originalContent = this.$refs.exportContent;
      const clonedContent = originalContent.cloneNode(true);

      // 2. 替换单选按钮为可视化符号
      this.replaceRadios(clonedContent);

      // 3. 构建完整的HTML文档
      const html = this.buildHtmlDocument(clonedContent);

      // 4. 导出为Word
      this.generateWordDocument(html);
    },

    replaceRadios(clonedContent) {
      // 找到所有单选按钮
      const radios = clonedContent.querySelectorAll('input[type="radio"]');

      radios.forEach((radio) => {
        const container = radio.parentNode;
        const label = container.querySelector("label");
        const isChecked =
          radio.checked || radio.getAttribute("checked") !== null;

        // 创建替换元素
        const symbol = document.createElement("span");
        symbol.className = "radio-symbol";
        symbol.innerHTML = isChecked ? "☑" : "□";
        symbol.style.color = isChecked ? "green" : "black";
        symbol.style.marginRight = "5px";
        symbol.style.fontSize = isChecked ? "12pt" : "18.5pt";

        // 替换DOM结构
        container.insertBefore(symbol, label);
        container.removeChild(radio);
      });
    },

    buildHtmlDocument(content) {
      return `
          <!DOCTYPE html>
          <html>
          <head>
            <meta charset="UTF-8">
            <style>
              body { 
                font-family: "Microsoft YaHei", Arial, sans-serif; 
                font-size: 12pt; 
                margin: 20px; 
                line-height: 1.5;
              }
              h2 { color: #2c3e50; }
              h3 { color: #34495e; margin-bottom: 10px; }
              .question { margin-bottom: 25px; }
              .option-container { margin: 8px 0; }
              .radio-symbol { margin-right: 8px; }
            </style>
          </head>
          <body>
            ${content.innerHTML}
            <p style="margin-top: 30px; color: #7f8c8d; font-size: 10pt;">
              文档生成时间: ${new Date().toLocaleString()}
            </p>
          </body>
          </html>
        `;
    },

    generateWordDocument(html) {
      const options = {
        orientation: "portrait",
        margins: {
          top: 1000,
          right: 1000,
          bottom: 1000,
          left: 1000,
        },
      };

      const converted = htmlDocx.asBlob(html, options);
      saveAs(
        converted,
        `问卷结果_${new Date().toISOString().slice(0, 10)}.docx`
      );
    },
  },
};
</script>

<style scoped>
.option-container {
  margin: 10px 0;
}

button {
  margin-top: 20px;
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #3aa876;
}
</style>
